<template>
  <div
    v-lazy:background-image="imageUrl"
    :class="model === 'imageFill' ? 'w-image-fill' : 'w-image-fit'"
    :style="{ width: `${width}px`, height: `${height}px` }"
    class="global-image"
  >
    <slot />
  </div>
</template>

<script>
import ImageFormat from '@/utils/filters/oss'
export default {
  name: 'GlobalImage',
  props: {
    url: {
      type: String,
      default: ''
    },
    model: {
      type: String,
      default: 'imageFill' // imageLfit, imageMfit, imageFill
    },
    width: {
      type: [Number, String],
      default: 100
    },
    height: {
      type: [Number, String],
      default: 100
    }
  },
  computed: {
    imageUrl () {
      return ImageFormat[this.model](this.url, this.width, this.height)
    }
  }
}
</script>

<style scoped lang="less">
.global-image {
}
</style>
